在团队协作中，为避免低级 Bug、产出风格统一的代码，会预先制定编码规范。使用 Lint 工具和代码风格检测工具，则可以辅助编码规范执行，有效控制代码质量。

有些项目框架为了开发便利则直接集成ESLint校验，在提高便利的同时，也制造了一点小麻烦。以我为例：

之前并没有用过ESLint，也没有听别人说起过；

再入手vue v·2时，编译器提示添加ESLint校验，点击添加后，发现编写的代码里全是bug，对于修改更是无从下手。后来直接在网上找到完整的demo粘贴到项目中，依然有bug。

至此发现错误并非因我而起，后来在万能的网友帮助下才发现原因所在，

所以，还是好好学习吧

ESLint 简介

ESLint 由 JavaScript 红宝书 作者 Nicholas C. Zakas 编写， 2013 年发布第一个版本。 NCZ 的初衷不是重复造一个轮子，而是在实际需求得不到 JSHint 团队响应 的情况下做出的选择：以可扩展、每条规则独立、不内置编码风格为理念编写一个 lint 工具。

ESLint 主要有以下特点：

• 默认规则包含所有 JSLint、JSHint 中存在的规则，易迁移；
• 规则可配置性高：可设置「警告」、「错误」两个 error 等级，或者直接禁用；
• 包含代码风格检测的规则（可以丢掉 JSCS 了）；
• 支持插件扩展、自定义规则。
  ESLint 已经宣布支持 JSX，不过目前为 alpha 版本，正式版发布之前可以先使用 eslint-plugin-react 替代。

  Update 2016.04.22：

  • ESLint 从 0.12.0 开始已经支持 JSX。
  • 2016.04.14，JSCS 宣布合并至 ESLint。
  • 2016.04.19，ESLint 宣布加入 jQuery 基金会。

  无疑，无论现状，亦或前景，ESLint 都会是首选的 JavaScript 代码质量控制工具。

使用 ESLint

ESLint 详尽使用参见官方文档，下面罗列的是由 JSHint 迁移到 ESLint 的一些要点。

配置

可以通过以下三种方式配置 ESLint:

• 使用 .eslintrc 文件（支持 JSON 和 YAML 两种语法）；
• 在 package.json 中添加 eslintConfig 配置块；

• 直接在代码文件中定义。
  .eslintrc 文件示例：

  {
  “env”: {

  <span class="token string">"browser"</span><span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  

  },
  “parserOptions”: {

  <span class="token string">"ecmaVersion"</span><span class="token punctuation">:</span> <span class="token number">6</span><span class="token punctuation">,</span>
  <span class="token string">"ecmaFeatures"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token string">"jsx"</span><span class="token punctuation">:</span> <span class="token boolean">true</span>
  <span class="token punctuation">}</span>
  

  },
  “globals”: {

  <span class="token string">"angular"</span><span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  

  },
  “rules”: {

  <span class="token string">"camelcase"</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
  <span class="token string">"curly"</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
  <span class="token string">"brace-style"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">"1tbs"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token string">"quotes"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">"single"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token string">"semi"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">"always"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token string">"space-in-brackets"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">"never"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token string">"space-infix-ops"</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
  

  }
  }
  </pre>.eslintrc放在项目根目录，则会应用到整个项目；如果子目录中也包含.eslintrc` 文件，则子目录会忽略根目录的配置文件，应用该目录中的配置文件。这样可以方便地对不同环境的代码应用不同的规则。

  package.json 示例：

  `{
    "name": "mypackage",
    "version": "0.0.1",
    "eslintConfig": {
      "env": {
        "browser": true,
        "node": true
      }
    }
  }
  `

  **文件内配置** 代码文件内配置的规则会覆盖配置文件里的规则。 **禁用 ESLint：**

  `/* eslint-disable */
  var obj = { key: 'value', }; // I don't care about IE8  
  /* eslint-enable */
  `

  **禁用一条规则：**

  `/*eslint-disable no-alert */
  alert('doing awful things');  
  /* eslint-enable no-alert */
  `

  **调整规则：**

  `/* eslint no-comma-dangle:1 */
  // Make this just a warning, not an error
  var obj = { key: 'value', }  
  `

  工作流集成

  ESLint 可以集成到主流的编辑器和构建工具中，以便我们在编写的代码的同时进行 lint。

  编辑器集成

  以 WebStorm 为例，只要全局安装 ESLint 或者在项目中依赖中添加 ESLint ，然后在设置里开启 ESLint 即可。其他编辑可以从官方文档中获得获得具体信息。

  构建系统集成

  在 Gulp 中使用：
  

  `var gulp = require(‘gulp’);
  var eslint = require(‘gulp-eslint’);

  gulp.task(‘lint’, function() {
  return gulp.src(‘client/app/*/.js’)

  <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">eslint</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>eslint<span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  

  });
  `
  其他构建工具参考官方文档。

  代码风格检测

  在团队协作中，统一的代码风格更具可读性、可维护性。ESLint 内置了一系列有关代码风格的规则，可以根据团队的编码规范设置。

  自定义规则

  显然，ESLint 内置的规则不可能包罗所有需求。可以通过插件实现自定义规则，这是 ESLint 最有卖点的功能。在 NPM 上以 eslintplugin 为关键词，可以搜索到很多插件，包括 eslint-plugin-react。如果有自行开发插件的需求，可以阅读 ESLint 插件开发文档。

  以 eslint-plugin-react 为例，安装以后，需要在 ESLint 配置中开启插件，其中 eslint-plugin- 前缀可以省略：
  

  `{
    “plugins”: [

  <span class="token string">"react"</span>
  

  ]
  }
  </pre> 接下来开启 ESLint JSX 支持（ESLint 内置选项）： <pre class=" language-js">{
  “ecmaFeatures”: {

  <span class="token string">"jsx"</span><span class="token punctuation">:</span> <span class="token boolean">true</span>
  

  }
  }
  </pre> 然后就可以配置插件提供的规则了： <pre class=" language-js"> {
  “rules”: {

  <span class="token string">"react/display-name"</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  <span class="token string">"react/jsx-boolean-value"</span><span class="token punctuation">:</span> <span class="token number">1</span>
  

  }
  }

自定义规则都是以插件名称为命名空间的。

结语

至此，ESLint 使用入门就介绍完了。但是，我们不应该仅仅是使用 ESLint 这个工具，更应该学习 ESLint 背后的设计理念：不求大而全，但求搭好扎实的基础架构，提供良好的、可扩展的 API。小到插件，大到应用程序开发，这一原则都适用。

感谢 https://csspod.com/getting-started-with-eslint/?utm_source=tuicool&utm_medium=referral